<template>
	<div :class="[{ 'defaultUl' : show } , 'BottomsMenus' ,'swiper']">
		<ul class="swiper-wrapper">
			<li v-for="(item,index) in menus" :key="item.type" class="swiper-slide" @click="btn(index)" :class="{'defaults':shows==item.typeName}" >{{item.typeName}}</li>
		</ul>
	</div>
</template>

<script>
import Swiper,{
	EffectCoverflow,
	EffectCube,
} from 'swiper';
// swiper配置
Swiper.use([EffectCoverflow,EffectCube]);
export default{
	name:"BottomsMenus",
	data(){
		return{
			menus:[],
			swiperList:'',
			show:false,
			shows:'全球经典',
		}
	},
	// 组件创建之后发起异步请求
	created() {
		this.getMenus();
	},
	mounted() {
		// 整个网页发起监听事件操作( '事件' , 出发事件后调用的函数 )
		// 限制触发函数的时间 每隔20毫秒-15毫秒执行一次滚动事件函数
		//window.addEventListener('scroll' , this.fiexMenus);
		let timer;
		let flag = true;	//判断是否打开滚动监听的函数
		window.addEventListener('scroll' , ()=>{
			// 设置定时器
			if( flag ){
				this.fiexMenus();
			}
			// 关闭开关
			flag = false;
			// 清除定时器
			clearTimeout(timer);
			// 设置定时器 每隔15毫秒，打开一次开关
			timer = setTimeout( ()=>{ flag = true } , 15);
		},true);
	},
	// 方法
	methods:{
		// 当滚动事件被触发时调用的函数
		fiexMenus(){
			// 当前区域距离窗口左上角的纵向坐标
			//console.log(window.pageYOffset);
			// 当前滚动条的纵向坐标
			//console.log(document.documentElement.scrollTop);
			let sTop = window.pageYOffset || document.documentElement.scrollTop;
			sTop >= 1600 ? (this.show = true) : (this.show = false);
			
			// 下滑更新:
			//1.获取当前滚动条的位置以及当前网页的高度 + 设备高度 ： 
			//2.监听滚动事件： 高度的获取，以及如果滚动条到达底部，发起一个新的异步请求
			/*
				1.监听滚动事件：获取高度，判断高度是否到达底部 ====> 调用异步请求函数
				2.异步函数，默认发起第一页的请求page = 1.页码就需要自增+1：当滚动事件发生并且达到底部，发起page的请求数据
				3.整理获取数据
			*/
		},
		getMenus(){
			this.axios.get('https://m.youxiake.com/api/m/index/part?uid=&sitecode=5&city_id=5&refreshCount=82').then( (res)=>{
				// 获取菜单栏的数据
				res.data.data.flowTabList.forEach( (item , i)=>{
					let obj = {
						type : item.type,
						typeName : item.typeName,
					}
					this.menus.push( obj );
				})
				// 调用滑动函数
				this.MenusSwiper();
				
			}).catch( (error)=>{
				console.log(error);
			})
			// this.axios.get('https://m.youxiake.com/img/index_nav_a.f046aa77.png?t=f046aa77a05058f6e5e279318b243a74').then( (res)=>{
			// 	console.log(res.data.data);
			// }).catch( (error)=>{
			// 	console.log(error);
			// })
		},
		// 滑动
		MenusSwiper(){
			// 开始点击之后，动态设置swiper的属性【swiper对象,params.属性名 = 值】
			this.swiperList = new Swiper('.BottomsMenus',{
				slidesPerView:6.5,
				centeredSlides:true,
				centeredSlidesBounds:true,
				slideToClickedSlide:true,
			});
			console.log(this.swiperMenus);
		},
		getImg( imgurl ){
			if( imgurl != '' ){
				// 去掉http://和https://
				let url = imgurl.substring( 8 );
				return 'http://image.weserv.nl?url='+url;
			}
		},
		btn(index){
			console.log(this.menus);
			this.shows = this.menus[index].typeName;
		}
	}
}
</script>

<style scoped>
.BottomsMenus ul{
	width: 90%;
	height: 100%;
	display: flex;
	align-items: center;
}
.BottomsMenus ul li{
	width: 14%;
	background-color: #eeeeee;
	text-align: center;
	height: 1.6rem;
	line-height: 1.5rem;
	font-size: 0.35rem;
}
/* 默认选择器 */
.defaultUl{
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
}
/*  */
.defaults{
	font-weight: bold;
	font-size: 0.38rem !important;
	background: url(../../../../public/bottomsmenusimg/bottomsmenus-01.png) no-repeat center center;
	background-size: 1.4rem;
}
</style>
